$(function () {
  
    (function (fbody) {
        if (fbody.length == 0) return;
        var sWidth = fbody.width(), //获取焦点图的宽度（显示面积）
	        len = fbody.find("li").length, //获取焦点图个数
	        index = 0,
	        picTimer, i;
        if (fbody.children('.btnBg').length == 0) fbody.append('<div class="btnBg"></div>');
        if (fbody.children('.pre').length == 0) fbody.append('<div class="preNext pre"></div>');
        if (fbody.children('.next').length == 0) fbody.append('<div class="preNext next"></div>');
        if (fbody.children('.btn').length == 0) {
            var btn = '<div class="fbtn">';
            for (i = 0; i < len; i++) {
                btn += '<span></span>';
            }
            btn += '</div>';
            fbody.append(btn);
        }
        fbody.find(".btnBg").css({
            "opacity":0.5,
            "filter": "progid:DXImageTransform.Microsoft.Alpha(opacity=50)"
        });
        //为小按钮添加鼠标滑入事件，以显示相应的内容
        var btns = fbody.find(".fbtn span");
        btns.css("opacity", 0.4).mouseenter(function () {
            index = btns.index(this);
            showPics(index);
        }).eq(0).trigger("mouseenter");

        //上一页、下一页按钮透明度处理
        fbody.find(".preNext").css("opacity", 0.2).hover(function () {
            $(this).stop(true, false).animate({ "opacity": "0.5" }, 300);
        }, function () {
            $(this).stop(true, false).animate({ "opacity": "0.2" }, 300);
        });

        //上一页按钮
        fbody.find(".pre").click(function () {
            index -= 1;
            if (index == -1) { index = len - 1; }
            showPics(index);
        });

        //下一页按钮
        fbody.find(".next").click(function () {
            index += 1;
            if (index == len) { index = 0; }
            showPics(index);
        });

        //本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
        fbody.find("ul").css("width", sWidth * (len));

        //鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
        fbody.hover(function () {
            clearInterval(picTimer);
        }, function () {
            picTimer = setInterval(function () {
                showPics(index);
                index++;
                if (index == len) { index = 0; }
            }, 4000); //此4000代表自动播放的间隔，单位：毫秒
        }).trigger("mouseleave");

        //显示图片函数，根据接收的index值显示相应的内容
        function showPics(index) { //普通切换
            var nowLeft = -index * sWidth; //根据index值计算ul元素的left值
            fbody.find("ul").stop(true, false).animate({ "left": nowLeft }, 570); //通过animate()调整ul元素滚动到计算出的position
            //$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
            fbody.find(".fbtn span").stop(true, false).animate({ "opacity": "0.4" }, 570).eq(index).stop(true, false).animate({ "opacity": "1" }, 300); //为当前的按钮切换到选中的效果
        }

    })($("#focus"));
});



(function($){
	
$.fn.rollGallery=function( options ){
	
	var opts=$.extend({},$.fn.rollGallery.defaults,options);
	
	return this.each(function(){
		var _this=$(this);
		var step=0;
		var maxMove=0;
		var animateArgu=new Object();
		_this.intervalRGallery=null;
		
		if( opts.noStep&&(!options.speed) ) opts.speed=30;
		
		if( opts.direction=="left"){
			step=_this.children( opts.childrenSel ).outerWidth(true);
		}else{
			step=_this.children( opts.childrenSel ).outerHeight(true);
		}
		
		maxMove=-(step*_this.children( opts.childrenSel ).length);
		_this[0].maxMove=maxMove;
		if( opts.rollNum ) step*=opts.rollNum;	
		animateArgu[ opts.direction ]="-="+step;	
				
		_this.children( opts.childrenSel ).slice( 0,opts.showNum ).clone(true).appendTo( _this );
		_this.mouseover( function(){ clearInterval( _this.intervalRGallery ); });
		_this.mouseout( function(){ _this.intervalRGallery=setInterval( function(){
				if( parseInt(_this.css( opts.direction ))<=maxMove ){
					_this.css( opts.direction , "0px");
				}
				if( opts.noStep ){
					_this.css( opts.direction, (parseInt(_this.css( opts.direction ))-opts.speedPx+"px") );
				}
				else{
					_this.animate( animateArgu ,opts.aniSpeed,opts.aniMethod );
				}
			}, opts.speed );});
		
		_this.mouseout();
	});
			
};

$.fn.rollGallery.defaults={
	direction : "left",
	speed : 3000,
	noStep : false,
	speedPx : 1,
	showNum : 1,
	aniSpeed:"slow",
	aniMethod:"swing",
	childrenSel:"*"
};
	
})(jQuery);


